<template>
  <div style="max-width: 100%; width: 400px; margin: auto">
    <el-container class="flex" style="height: 100%">
      <el-header>
        <Header />
      </el-header>
      <el-main class="main_view">
        <RouterView v-if="isRouterAlive" :key="route.fullPath" />
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
const route = useRoute();
const isRouterAlive = ref(true);
const reload = () => {
  isRouterAlive.value = false;
  nextTick(() => {
    isRouterAlive.value = true;
  });
};
provide("reload", reload);
</script>

<style scoped>
.main_view::-webkit-scrollbar {
  display: none;
}

.main_view {
  padding: 0;
  background-color: #f5f5f5;
  /* overflow: hidden; */
}

.el-header {
  height: 40px;
}
</style>
